<!DOCTYPE html>

<html xmlns:th="//www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>idols</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<nav th:replace="layouts::navbar"></nav>
<div id="waypoint" class="m-margin- animated fadeIn">
    <div class="ui container m-opacity box-shadow-max">
        <div  class="ui bottom attached segment">
    <h3>idol</h3>

    <hr>
    <a th:href="@{/idols/new}" class="ui teal button m-mobile-wide">新增idol</a>
    <br>
    <table class="table table-bordered table-striped">
        <thead class="thead-dark">
        <tr>
            <th>idol</th>
            <th>年龄</th>
            <th>出生地</th>
            <th>音乐</th>
            <th>话剧</th>
            <th>影视剧</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="aIdol : ${idols}">
            <td th:text="${aIdol.name}"></td>
            <td th:text="${aIdol.age}"></td>
            <td th:text="${aIdol.place}"></td>
            <td th:text="${aIdol.music}"></td>
            <td th:text="${aIdol.drama}"></td>
            <td th:text="${aIdol.play}"></td>

            <td><a th:href="@{/idols/update(id=${aIdol.idolId})}" class="btn btn-info btn-sm">更新</a>
            <a
                    th:href="@{/idols/delete(id=${aIdol.idolId})}"
                    class="btn btn-danger btn-sm"
                    onclick="if (!(confirm('你确定删除这个idol吗？'))) return false"
            >删除</a>
            </td>
        </tr>
        </tbody>
    </table>
        </div>
    </div>
</div>
</body>
</html>